<template>
	<view class="content">
		<search-bar v-if="false"></search-bar>
		<view class="select" v-if="false">
			<view class="item">
				<text>热门文物</text>
				<image :src="checked?checkedList[1]:checkedList[0]"></image>
			</view>
			<view class="item">
				<text>藏品年度</text>
				<image :src="isDesc?orderByList[1]:orderByList[0]"></image>
			</view>
			<image class="btn" src="../../static/guided_icon_choose@2x.png"></image>
		</view>
		<scroll-view scroll-y="true" class="list">
			<antiqueItem v-for="(item,index) in list" :style="index==list.length-1?'margin-bottom:40rpx':''"
				:id="item.id" :img="item.img" :title="item.title" :notAntique="item.notAntique" :isTips="item.isTips"
				:play="item.audio" :infoList="item.desc" @goTo="goTo(arguments)"></antiqueItem>
		</scroll-view>
	</view>
</template>

<script>
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	import searchBar from '../customer/searchBar.vue'
	import antiqueItem from '../customer/antiqueItem.vue'
	export default {
		components: {
			searchBar,
			antiqueItem,
		},
		data() {
			return {
				list: [],

				checked: false,
				checkedList: [
					'../../static/guided_icon_check_default@2x.png',
					'../../static/guided_icon_check_clicked@2x.png'
				],
				isDesc: false,
				orderByList: [
					'../../static/guided_icon_sequence_default@2x.png',
					'../../static/guided_icon_sequence_clicked@2x.png'
				],

			}
		},
		onLoad(options) {
			this.getList(options.id)
		},
		methods: {
			getList(id) {
				doGet('/blade-museum/expl/getChildren?id=' + id, (res) => {
					let list = []
					for (let item of res) {
						item.isTips = false
						if (item.typeCode == 3) {
							item.notAntique = false
						} else {
							item.notAntique = true
						}
						list.push(item)
					}
					this.list = res
				}, (err) => {

				})
			},
			goTo(e) {
				if (e[1]) {
					uni.navigateTo({
						url: './introductionInfo?id=' + e[0]
					})
				} else {
					uni.navigateTo({
						url: './antiqueInfo?id=' + e[0]
					})
				}

			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		height: calc(100% - 88rpx);
		width: 100%;
	}

	.select {
		height: 100rpx;
		width: calc(100% - 40rpx);
		background: #eee;
		border-bottom: 1rpx solid #B9AC90;
		display: flex;
		align-items: center;
		justify-content: left;
		flex-direction: row;
		padding: 0 20rpx;
		position: relative;
	}

	.select .item {
		height: 50rpx;
		line-height: 46rpx;
		background: #B9AC90;
		font-size: 26rpx;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 25rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.select .item image {
		margin-left: 10rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.select .btn {
		background: #B9AC90;
		border-radius: 25rpx;
		height: 30rpx;
		width: 30rpx;
		padding: 10rpx;
		position: absolute;
		right: 20rpx
	}

	.list {
		position: fixed;
		height: calc(100% - 88rpx);
		width: 100%;
		padding-top: 20rpx;
	}

	/* .list .item{
		width: calc(100% - 40rpx);
		height: 200rpx;
		padding: 20rpx;
		display: flex;
	}
	
	.list .item image{
		width: 200rpx;
		height: 200rpx;
		margin: 15rpx 0;
	}
	
	.list .item .info{
		padding: 10rpx 0;
		margin-left: 20rpx;
		width: calc(100% - 220rpx);
		height: calc(100% - 20rpx);
		display: flex;
		flex-direction: column;
		align-items: left;
		position: relative;
	}
	
	.list .item .info .title{
		font-size: 32rpx;
		color: #333;
		width: 100%;
	}
	.list .item .info .desc{
		font-size: 24rpx;
		color: #999;
		display: flex;
	}
	.list .item .info .desc .line{
		margin-top: 10rpx;
		display: inline-block;
		width: 300rpx;
		line-height: 30rpx;
		max-height: 60rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.list .item .info .desc .tip{
		margin: 10rpx 10rpx 0 0;
		font-size: 24rpx;
		color: #999;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		background: #eee;
	}
	.list .item .info .share{
		font-size: 28rpx;
		color: #666;
		position: absolute;
		bottom: 10rpx;
		left: 0rpx;
	}
	.list .item .info .player{
		position: absolute;
		font-size: 24rpx;
		top: 80rpx;
		right: 0rpx;
		color: #fff;
		height: 50rpx;
		line-height: 44rpx;
		padding: 0 40rpx;
		border-radius: 25rpx;
		background: #B9AC90;
	} */

	/* .tabbar {
		border-bottom: #ddd solid 2rpx;
		margin: 0 40rpx;
	}

	.content image {
		margin: 20rpx;
		width: calc(100% - 40rpx);
		height: auto;
	}

	.text {
		color: #333;
		padding: 0 20rpx;
		text-align: justify;
		text-indent: 2em;
	} */
</style>
